<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    
    <meta charset="utf-8">
    <meta name="baidu-site-verification" content="5f1f7ad2a57c201714656f516cf11b94"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

    <title>为什么 ++[[]][+[]]+[+[]] = 10？ - justjavac(迷渡)</title>
    
    <meta name="keywords" content="javascript, 语法">
    <meta name="author" content="justjavac">
    <link rel="alternate" title="justjavac(迷渡)" href="/atom.xml" type="application/rss+xml" />
  	<!--[if lt IE 9]>
  	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
  	<script src="http://libs.useso.com/js/respond.js/1.4.2/respond.min.js"></script>
  	<![endif]-->

    <link href="/assets/themes/twitter/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/assets/themes/twitter/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    <link href="/assets/themes/twitter/css/style.css?v=201312251006" rel="stylesheet" media="all" />
    <link href="/assets/themes/twitter/css/pygments.css?v=201312251006" rel="stylesheet" media="all" />

    <link rel="index prerender" title="justjavac(迷渡)" href="/" />
    
    <link rel="prev prerender" href="/javascript/2012/05/24/10-tips-for-writing-awesome-jquery-plugins.html" title="10 个技巧助你写出卓越的 jQuery 插件" />
    
    
    <link rel="next prerender" href="/javascript/2012/05/24/that-javascript-not-available-case.html" title="javascript 不可用的问题探究" />
    
    
    <link rel="apple-touch-icon" href="/assets/themes/twitter/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/assets/themes/twitter/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/assets/themes/twitter/images/apple-touch-icon-114x114.png">
    
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand hidden-phone" href="/">justjavac(迷渡)</a>
          <ul class="nav">
            <li class="visible-phone"><a href="/">首页</a></li>
            <li><a href="/codepuzzle.html">代码之谜</a></li>
            <li><a href="/categories.html">目录</a></li>
            <li class="hidden-phone"><a href="/about.html">关于迷渡</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">我在这里<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="http://weibo.com/justjavac" target="_blank" rel="noopener">微博</a></li>
                <li><a href="http://www.zhihu.com/people/justjavac.com" target="_blank" rel="noopener">知乎</a></li>
                <li><a href="http://segmentfault.com/u/justjavac" target="_blank" rel="noopener">SegmentFault</a></li>
                <li><a href="https://github.com/justjavac" target="_blank" rel="noopener">GitHub</a></li>
                <li><a href="http://stackoverflow.com/users/343194/justjavac" target="_blank" rel="noopener">StackOverFlow</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="content">
     

<div class="page-header">
  <h1>为什么 ++[[]][+[]]+[+[]] = 10？ <small></small></h1>
</div>
<div class="row-fluid">
  <div class="span8">  
    <div id="article">
    <p>首先，问“<a href="http://stackoverflow.com/q/7202157/343194" title="Can you explain why ++[[]][+[]]+[+[]] = “10”?">这个问题(英文)</a>”的人是个天才，他怎么会遇到这样的一个问题。
其次，回答这个问题的人更是一个天才，我难以想象他会回答这个问题，更难以想象的是，他的回答是如此的详细和丰富和完整，真正称得上诲人不倦。</p>

<p>既然遇到了这个问题，我们不妨也跟着提高一下。</p>

<p>这是一个<a href="http://justjavac.com/javascript/2012/04/05/you-dont-know-javascript.html">Javascript 语言题目</a>，一个完全有效的等式，不信自己可以试一下，下面看看高人的题解：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="o">++</span><span class="p">[[]][</span><span class="o">+</span><span class="p">[]]</span><span class="o">+</span><span class="p">[</span><span class="o">+</span><span class="p">[]]</span>
</code></pre>
</div>

<p>如果把这段表达式拆分开来，它相等于：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="o">++</span><span class="p">[[]][</span><span class="o">+</span><span class="p">[]]</span>
<span class="o">+</span>
<span class="p">[</span><span class="o">+</span><span class="p">[]]</span>
</code></pre>
</div>

<p>在 JavaScript 里，<code class="highlighter-rouge">+[] === 0</code> 是完全正确的。 <code class="highlighter-rouge">+</code> 会把一些字符转化成数字，在这里，这个式子会变成 <code class="highlighter-rouge">+""</code> 或 <code class="highlighter-rouge">0</code>。</p>

<p>因此，我们可以简化一下(<code class="highlighter-rouge">++</code> 比 <code class="highlighter-rouge">+</code> 有更高的优先级)：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="o">++</span><span class="p">[[]][</span><span class="mi">0</span><span class="p">]</span>
<span class="o">+</span>
<span class="p">[</span><span class="mi">0</span><span class="p">]</span>
</code></pre>
</div>

<p>因为 <code class="highlighter-rouge">[[]][0]</code> 的意思是：获取 <code class="highlighter-rouge">[[]]</code> 的第一个元素，这就得出了下面的结果：</p>

<ul>
  <li><code class="highlighter-rouge">[[]][0]</code> 返回内部数组 (<code class="highlighter-rouge">[]</code>)。根据语言规范，我们说 <code class="highlighter-rouge">[[]][0] === []</code> 是不正确的，但让我们把这个内部数组称作 A，以避免错误的写法。</li>
  <li><code class="highlighter-rouge">++[[]][0] == A + 1</code>， 因为 <code class="highlighter-rouge">++</code> 的意思是”加一”。</li>
  <li><code class="highlighter-rouge">++[[]][0] === +(A + 1)</code>；换句话说，你得到的永远是个数值( <code class="highlighter-rouge">+1</code> 并不一定得到的是个数值，但 <code class="highlighter-rouge">++</code> 一定是)。</li>
</ul>

<p>同样，我们可以把这一堆代码简化的更清晰。让我们把 A 换回成 <code class="highlighter-rouge">[]</code> :</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="o">+</span><span class="p">([]</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span>
<span class="o">+</span>
<span class="p">[</span><span class="mi">0</span><span class="p">]</span>
</code></pre>
</div>

<p>在 JavaScript 里，这也是正确的：<code class="highlighter-rouge">[] + 1 === "1"</code>，因为 <code class="highlighter-rouge">[] == ""</code> (这相当于一个空的数组的内部元素连接)，于是：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="o">+</span><span class="p">([]</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">===</span> <span class="o">+</span><span class="p">(</span><span class="s2">"” + 1)，并且 
+("</span><span class="err">”</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">===</span> <span class="o">+</span><span class="p">(</span><span class="s2">"1"</span><span class="p">)</span><span class="err">，并且</span> 
<span class="o">+</span><span class="p">(</span><span class="s2">"1"</span><span class="p">)</span> <span class="o">===</span> <span class="mi">1</span> 
</code></pre>
</div>

<p>让我们再次简化一下：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="mi">1</span>
<span class="o">+</span>
<span class="p">[</span><span class="mi">0</span><span class="p">]</span>
</code></pre>
</div>

<p>同样，在 Javascript 里，这是正确的：<code class="highlighter-rouge">[0] == "0"</code>，因为这是相当于一个有一个元素的数组的内部元素的连接。
各元素会使用，分隔。
当只有一个元素时，你可以推论出这个过程的结果就是它自身的第一个元素。</p>

<p>所以，最终我们得到 (数字 + 字符串 = 字符串)：</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="mi">1</span>
<span class="o">+</span>
<span class="s2">"0"</span>

<span class="o">===</span> <span class="s2">"10"</span> <span class="c1">// 耶！</span>
</code></pre>
</div>

<p>如果你想知道更详细的信息，请访问<a href="http://stackoverflow.com/q/7202157/343194" title="Can you explain why ++[[]][+[]]+[+[]] = “10”?">这里(英文)</a>。</p>


    <p>继续阅读关于
    
    
    
       
      	<a href="/tags.html#javascript-ref" rel="tag">javascript</a>
      
    
    
    
    的文章</p>
    </div>  

    <hr/>

    <div class="pagination">
      <ul>
      
        <li class="prev"><a href="/javascript/2012/05/24/10-tips-for-writing-awesome-jquery-plugins.html" title="10 个技巧助你写出卓越的 jQuery 插件">&larr; 上一篇</a></li>
      
        <li><a href="/archive.html">归档</a></li>
      
        <li class="next"><a href="/javascript/2012/05/24/that-javascript-not-available-case.html" title="javascript 不可用的问题探究">下一篇 &rarr;</a></li>
      
      </ul>
    </div>
    
    <hr>
    <!-- Duoshuo Comment BEGIN -->
    <div id="comments" class="ds-thread" data-title="为什么 ++[[]][+[]]+[+[]] = 10？" data-url="http://justjavac.com/javascript/2012/05/24/can-you-explain-why-10.html" data-thread-key="/javascript/2012/05/24/can-you-explain-why-10"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"justjavac"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = 'http://static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
        || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- Duoshuo Comment END -->
  </div>
  
  <aside class="span4">

  <section>
    <h3>公众号</h3>
    <p>
      欢迎订阅我的微信公众帐号，只推送原创文字。欢迎扫描二维码订阅：<br/>
      <img src="/assets/images/weixin-justjavac.jpg" alt="justjavac微信公众帐号"/>
    </p>
   </section>
    
    <section>
    <h3>推荐阅读</h3>
    <ul id="recent_posts">
      <li><a href="http://phpbestpractices.justjavac.com/" target="_blank" rel="noopener">PHP 最佳实践（译）</a></li>
      <li><a href="http://justjavac.com/php/2015/09/28/read-the-flarum-story-why-im-building-flarum.html" target="_blank" rel="noopener">Flarum 的故事：我为什么开发 Flarum</a></li>
      <li><a href="http://justjavac.com/named-function-expressions-demystified.html" target="_blank" rel="noopener">命名函数表达式探秘</a></li>
      <li><a href="http://justjavac.com/codepuzzle/2012/09/25/codepuzzle-introduction.html" target="_blank" rel="noopener">代码之谜 - 开篇/前言/序</a></li>
      <li><a href="http://justjavac.com/other/2012/05/15/qualified-programmer-should-read-what-books.html" target="_blank" rel="noopener">一个合格的程序员应该读过哪些书</a></li>
      <li><a href="http://justjavac.com/javascript/2012/05/24/can-you-explain-why-10.html" target="_blank" rel="noopener">为什么 ++[[]][+[]]+[+[]] = 10？</a></li>
      <li><a href="http://justjavac.com/other/2012/05/15/whats-wrong-with-the-for-loop.html" target="_blank" rel="noopener">for 循环为何可恨？</a></li>
      <li><a href="http://justjavac.com/javascript/2012/04/05/how-to-avoid-the-assignment-statement.html" target="_blank" rel="noopener">如何避免产生赋值语句</a></li>
      <li><a href="http://justjavac.com/javascript/2015/12/15/introducing-lazy-evaluation.html" target="_blank" rel="noopener">如何百倍加速 Lo-Dash？引入惰性计算</a></li>
    </ul>
    </section>
    
    <link rel="prerender" href="http://justjavac.com/codepuzzle/2012/09/25/codepuzzle-introduction.html">
    <link rel="prerender" href="http://justjavac.com/codepuzzle/2012/11/02/codepuzzle-float-from-surprised-to-ponder.html">
    <link rel="prerender" href="http://justjavac.com/javascript/2012/05/24/can-you-explain-why-10.html">
    <link rel="prerender" href="http://justjavac.com/codepuzzle/2012/10/28/codepuzzle-operator.html">
    <link rel="prerender" href="http://justjavac.com/other/2012/11/12/do-not-bool-as-function-parameters.html">
    <link rel="prerender" href="http://justjavac.com/other/2012/05/15/qualified-programmer-should-read-what-books.html">
    
    <section data-spy="affix" data-offset-top="418" class="hot_articles affix-top">
    <h3>热门文章</h3>
    <ul class="hots gray">
    <li class="textItem">
            <p class="itemTitle">
                <span class="hot">1</span>
                <a href="http://justjavac.com/codepuzzle/2012/09/25/codepuzzle-introduction.html" target="_blank" title="代码之谜（零）- 开篇/前言/序">
    代码之谜（零）- 开篇/前言/序</a></p>
            </li>
    <li class="textItem">
            <p class="itemTitle">
                <span class="hot">2</span>
                <a href="http://justjavac.com/codepuzzle/2012/11/02/codepuzzle-float-from-surprised-to-ponder.html" target="_blank" title="代码之谜（四）- 浮点数（从惊讶到思考）">
    代码之谜（四）- 浮点数（从惊讶到思考）</a></p>
            </li>
    <li class="textItem">
            <p class="itemTitle">
                <span class="hot">3</span>
                <a href="http://justjavac.com/javascript/2012/05/24/can-you-explain-why-10.html" target="_blank" title="为什么 ++[[]][+[]]+[+[]] = 10？">
    为什么 ++[[]][+[]]+[+[]] = 10？</a></p>
            </li>
    <li class="textItem">
            <p class="itemTitle">
                <span class="">4</span>
                <a href="http://justjavac.com/codepuzzle/2012/10/28/codepuzzle-operator.html" target="_blank" title="代码之谜（三）- 运算符">
    代码之谜（三）- 运算符</a></p>
            </li>
    <li class="textItem">
            <p class="itemTitle">
                <span class="">5</span>
                <a href="http://justjavac.com/other/2012/11/12/do-not-bool-as-function-parameters.html" target="_blank" title="千万不要把 bool 当成函数参数">
    千万不要把 bool 当成函数参数</a></p>
            </li>
    <li class="textItem">
            <p class="itemTitle">
                <span class="">6</span>
                <a href="http://justjavac.com/other/2012/05/15/qualified-programmer-should-read-what-books.html" target="_blank" title="一个合格的程序员应该读过哪些书">
    一个合格的程序员应该读过哪些书</a></p>
            </li>
    <li class="textItem">
            <p class="itemTitle">
                <span class="">7</span>
                <a href="http://justjavac.com/codepuzzle/2012/10/28/codepuzzle-expression-and-statement.html" target="_blank" title="代码之谜（二）- 语句与表达式">
    代码之谜（二）- 语句与表达式</a></p>
            </li>
    <li class="textItem">
            <p class="itemTitle">
                <span class="">8</span>
                <a href="http://justjavac.com/codepuzzle/2012/10/15/codepuzzle-finite-and-infinite.html" target="_blank" title="代码之谜（一）- 有限与无限">
    代码之谜（一）- 有限与无限</a></p>
            </li>
    <li class="textItem">
            <p class="itemTitle">
                <span class="">10</span>
                <a href="http://justjavac.com/codepuzzle/2012/11/11/codepuzzle-float-who-stole-your-accuracy.html" target="_blank" title="代码之谜（五）- 浮点数（谁偷了你的精度？）">
    代码之谜（五）- 浮点数（谁偷了你的精度？）</a></p>
            </li>
    </ul>
    </section>    

  </aside>
</div>


      </div>

      <footer>
        <p>&copy; <a href="http://weibo.com/justjavac" rel="noopener" target="_blank">@justjavac</a> 2012 
          基于 <a href="http://jekyllbootstrap.com" target="_blank" title="The Definitive Jekyll Blogging Framework" rel="nofollow noopener">Jekyll Bootstrap</a>
          和 <a href="http://twitter.github.com/bootstrap/" target="_blank" rel="nofollow noopener">Twitter Bootstrap</a> 构建, 
          源码托管在 <a href="https://github.com/justjavac/justjavac.github.com" target="_blank" rel="noopener">github</a> 上
        </p>
      </footer>

    </div>

    <a class="v-fork-me" href="https://github.com/justjavac/justjavac.github.com" target="_blank" rel="noopener">
      <img src="/assets/themes/twitter/bootstrap/img/forkme_right_darkblue.png" alt="Fork me on GitHub">
    </a>

    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/jqueryui/1.9.0/jquery-ui.min.js "></script>
    <script src="http://libs.baidu.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="/assets/js/bootstrap-affix.js"></script>

    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?5578a27c6c70bf44e7509eda26137f4c";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
       
  </body>
</html>

